<template>
	<view v-if="info">
		<u-navbar :title="title">
			<view slot="right" class="text-primary margin-right" @click="$goto('/pages/service/other-record?type='+form.type)">预约记录</view>
		</u-navbar>

		<image :src="info.full_banner" class="banner" mode="aspectFill"></image>
		<view class="form">
			<view class="title">快速预约{{title}}</view>

			<view class="flex-row justify-between align-center" style="width: 588rpx;margin: 0 auto;">
				<view class="ipt" style="width: 300rpx;">
					<image src="../../static/images/ots1.png" style="width: 32rpx;height: 32rpx; margin-left: 16rpx;"></image>
					<view style="width: 260rpx;">
						<u-field label-width="0" v-model="form.name" placeholder="请输入姓名"></u-field>
					</view>
				</view>
				
				<view class="ck-group">
					<view class="ck-item" @click="form.sex=1">
						<image class="ck" :src="`../../static/images/ck-${form.sex==1?'on':'no'}.png`"></image>
						<text>先生</text>
					</view>
				
					<view class="ck-item" @click="form.sex=2">
						<image class="ck" :src="`../../static/images/ck-${form.sex==2?'on':'no'}.png`"></image>
						<text>女士</text>
					</view>
				</view>
			</view>
			
			<view class="flex-col align-center">
				<view class="ipt">
					<image src="../../static/images/ots2.png" style="width: 32rpx;height: 32rpx; margin-left: 16rpx;"></image>
					<view style="width: 440rpx;">
						<u-field label-width="0" v-model="form.company" placeholder="请填写公司名称"></u-field>
					</view>
					<view class="ac-btn flex-row justify-center align-center" @click="acShow=true">
						<text>{{userType}}</text>
						<u-icon name="arrow-down" style="margin-top: 8rpx;margin-left: 4rpx;" size="24"></u-icon>
					</view>
					<u-action-sheet :list="acList" v-model="acShow" @click="acClick"></u-action-sheet>
				</view>
				
				<view class="ipt">
					<image src="../../static/images/ots3.png" style="width: 32rpx;height: 32rpx; margin-left: 16rpx;"></image>
					<view style="width: 560rpx;">
						<u-field label-width="0" v-model="form.mobile" placeholder="请输入您的手机号码"></u-field>
					</view>
				</view>
			</view>
			
			<view style="margin: 16rpx 42rpx;font-size: 24rpx;font-weight: bold;">您可能还有其他需求</view>
			<u-field class="textarea" :clearable="false" v-model="form.content" label-width="0" :auto-height="false" maxlength="500" type="textarea" placeholder="请填写您的需求，例如我还需要注册地址，税收优惠 税控发票等~"></u-field>
			
			<my-btn gold style="margin: 32rpx auto 16rpx auto;" size="md" @click="submit">预约注册</my-btn>
			<view class="text">
				<view class="text-center">预约成功后我的工作人员将尽快与您进行对接</view>
				<view class="text-center on">受理时间丨星期一至星期五早9:00-晚6:00</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '其他服务',
				info: '',
				acList: [
					{ text: '企业' },
					{ text: '个人' }
				],
				acShow: false,
				form: {
					name: '',
					sex: 1,
					company: '',
					mobile: '',
					content: '',
					type: '',
					company_type: 1
				}
			};
		},
		computed: {
			userType() {
				return this.form.company_type == 1 ? '企业' : '个人'
			}
		},
		onLoad(opt) {
			this.form.type = opt.type
			this.getData()
		},
		methods: {
			getData() {
				this.$u.get('/category/type/'+this.form.type).then(res => {
					let { type } = res.data.result
					this.info = type
					this.title = type.title
				})
			},
			submit() {
				this.$u.post('/category/appointment/tib', this.form).then(res => {
					res.data.code==0 && this.$msg(res.data.msg, 1000, true).then(res => this.$goto('/pages/service/other-record?type='+form.type))
					res.data.code==0 || this.$msg(res.data.msg)
				})
			},
			acClick(e) {
				if (e==0) {
					this.form.company_type = 1
				} else if (e==1) {
					this.form.company_type = 2
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	
	/deep/ .u-field {
		padding: 16rpx;
	}
	
	/deep/ .my-btn.md {
		height: 70rpx;
	}
	
	.banner {
		width: 750rpx;
		height: 355rpx;
		position: relative;
		z-index: 1;
	}

	.form {
		width: 670rpx;
		height: 889rpx;
		background: url(../../static/images/ots-bg.png);
		background-size: 100% 100%;
		margin: -140rpx auto 0 auto;
		position: relative;
		z-index: 2;
		padding-top: 40rpx;

		.title {
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			line-height: 50rpx;
			letter-spacing: 4rpx;
			text-align: center;
			margin-bottom: 24rpx;
		}

		.ipt {
			margin: 16rpx 0;
			width: 588rpx;
			height: 68rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 8rpx;
			border: 1rpx solid rgba(191, 191, 191, 1);
			display: flex;
			align-items: center;
		}
		
		.ac-btn {
			width: 120rpx;
			height: 100%;
			border-left: 1rpx solid rgba(191, 191, 191, 1);;
		}
		
		.textarea {
			margin: 0 auto;
			width:588rpx;
			height:194rpx;
			background:rgba(255,255,255,1);
			border-radius:8rpx;
			border:1rpx solid rgba(191,191,191,1);
			overflow-y: scroll;
		}
	}

	.ck-group {
		display: flex;
		align-items: center;

		.ck-item {
			margin: 0 16rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(191, 191, 191, 1);
			line-height: 40rpx;
		}

		.ck {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.text {
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 40rpx;

		.on {
			color: rgba(238, 188, 128, 1);
		}
	}
</style>
